<script th:fragment="common_function_js" th:inline="javascript">
    //<![CDATA[
    // 验证选择的theme是否与当前页面中被选择的theme是否一致
    function checkTheme(theme) {
        if (!$(".udin-comp").eq(theme - 1).hasClass("active")) {
            var bool = false;
            for (var i = 0; i < $(".udin-comp").length; i++) {
                var item = $(".udin-comp").eq(i)
                if (theme === item.data("theme")) {
                    bool = true;
                    break;
                }
            }
            if (!bool) {
                console.error("vue theme 的数据与展示选择的数据不一致！", theme);
            }
        }
    }

    // 公共方法
    function getComponentName() {
        var udinrender = $.trim($("#input-udinrender").val())
        if (udinrender.length > 0) {
            return udinrender
        }
        var compname = $("#input-compname").val();
        var temp = titleCase(compname.replace("_", " ")).replace(" ", "");
        return temp.replace(temp[0], temp[0].toLowerCase());
    }

    function titleCase(str) {
        return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
    }

    function getVue() {
        return window && window.parent ? window.parent : null;
    }

    function getVueFunc(functionName) {
        let vue = getVue()
        return vue && vue[functionName] ? vue[functionName] : null;
    }

    // 判断图片加载的函数
    function isImgLoad(dom, callback) {
        var defereds = [];
        if (typeof dom === "string") {
            dom = $('#' + dom);
        }
        if (dom.find("img").length < 1) {
            callback();
            return;
        }
        var defereds = [];
        dom.find("img").each(function () {
            var dfd = $.Deferred();
            defereds.push(dfd);
            $(this).load(dfd.resolve);
            $(this).attr("src", $(this).attr("src"));
        });
        $.when.apply(null, defereds).done(function () {
            callback();
        });
    }

    //]]>
</script>

<style th:fragment="common_header_style" type="text/css">
    body,
    table {
        font-size: 12px;
    }

    table {
        table-layout: fixed;
        empty-cells: show;
        border-collapse: collapse;
        margin: 0 auto;
    }

    td {
        min-height: 30px;
    }

    h1,
    h2,
    h3 {
        font-size: 12px;
        margin: 0;
        padding: 0;
    }

    .table {
        border: 1px solid #cad9ea;
        color: #666;
    }

    .table th {
        background-repeat: repeat-x;
        min-height: 30px;
    }

    .table td,
    .table th {
        border: 1px solid #cad9ea;
        padding: 4px;
    }

    .table tr.alter {
        background-color: #f5fafe;
    }

    .udin-comp {
        border: 1px solid #ffffff;
        cursor: pointer;
        padding: 8px;
        position: relative;
    }

    .udin-comp:hover {
        border-color: #409eff;
    }

    .udin-comp .ward {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 3;
    }

    .active {
        border-color: #409eff;
    }

    .udin-comp .dpnn {
        display: none;
    }
</style>